<template>
  <div id="container">
    <br>
    <br>
    <el-row>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" style="padding:10px" v-for="(fit) in fits">
        <el-card :body-style="{ padding: '0px'}" >
          <img :src="get_image(fit.商品封面)" width="100%" class="image" v-on:click="go_commodity_info(fit)">
          <div style="padding: 14px;" v-on:click="go_commodity_info(fit)">
            <span>{{fit.商品名称}}</span>
            <div class="bottom clearfix">
              <br>
              <h3 type="text" style="color: #f22d00;font-weight: bolder">￥{{fit.商品价格}}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    </div>


</template>

<script>

  import qs from 'qs';
  import axios from 'axios'

  const BASE_URL = 'http://127.0.0.1:8886';


  export default {
    created(){

    },
    data() {
      return {
        fits: [],
        sort_id:'',
        url: '',
        name:''
      }
    },
    mounted(){
      this.getdata();
    },

  watch:{
    "$route":"flush"
  },
    methods: {
      flush()
      {
        this.getdata();
      },
      getdata()
      {
        this.fits=[];
        axios.post(BASE_URL +'/commodity/search_commodity',
          qs.stringify({text:this.getpar('text'),start:0,coum:50}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re =>{
            console.log(re.data.备注);
            if(re.data.状态码 === 200)
            {
              // this.userInfo.id=true;
              this.fits= re.data.列表;

              console.log(this.fits);
              console.log(re.data.备注);
            }
            else
            {
            }
          })
          .catch((error =>{
            console.log(error)
          }))
      },
      go_commodity_info(item)
      {
        console.log("fff"+item.商品id);
        this.$router.push('/commodity_info?id='+item.商品id);
      },
      getpar(par){
        //获取当前URL
        let local_url = document.location.href;
        //获取要取得的get参数位置
        let get = local_url.indexOf(par + "=");
        if (get == -1) {
          return "";
        }
        //截取字符串
        let get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        let nextPar = get_par.indexOf("&");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);

        }
        nextPar = get_par.indexOf("?");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);
        }
        nextPar = get_par.indexOf("#");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);
        }
        return decodeURI(get_par);
      },
      get_image(id)
      {
        return BASE_URL+"/images/small/"+id+".jpg";
      }
      },


  }
</script>

<style scoped>
  #container{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }
   h1{
    font-family: "微软雅黑";
    color: #000000;
    width: auto;
    height: 20px;
     font-weight: 700;
     line-height: 1.2;
     text-align: center;

  }
  .grid-content  {
    margin-left: 10px;
    margin-right: 10px;
    /*background-coclor: rgb(44, 143, 121);*/
    /*background-image: url("./img/pro16.jpg");*/
    border-radius: 4px;
    min-height: 400px;
    min-width: 50px;

  }
</style>

